<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="">
    <meta name="author" content="">
    <title>注册</title>
    <script src="js/jquery-3.5.1.min.js"></script>

    <script type="text/javascript">


        $(function () {
            var flagUsername = false;
            var flagPassword = false;
            var flagConfirmpwd = false;
            var flagEmail = false;
            var flagTelephone = false;

            function checkUsername() {
                if ($("#user_nickname").val() == "") {
                    $("#usernameMsg").text("用户名不能为null")
                    flagUsername = false;
                    return;
                }

                reg = /^\w{2,8}$/;
                if (reg.test($("#user_nickname").val()) == false) {
                    $("#usernameMsg").text("用户名必须是2-8位");
                    flagUsername = false;
                    return;
                }

                $.ajax({
                    url: '/usermange/UserInfoServlet',
                    dataType: 'html',
                    type: 'POST',
                    data: {option: "checkUsername", username: $("#user_nickname").val(), random: Math.random()},
                    success: function (returnvalue) {
                        // alert(returnvalue)
                        if (returnvalue == "true") {

                            $("#usernameMsg").text("用户名可以注册");
                            flagUsername = true;
                        } else if (returnvalue == "false") {

                            $("#usernameMsg").text("用户名不能注册");
                            flagUsername = false;
                        }
                    }
                });
            }

            $("#user_nickname").blur(function () {
                checkUsername();
            });



            function checkPassword() {

                reg = /^\w{6,12}$/;
                if (reg.test($("#user_password").val()) == false) {
                    $("#passwordMsg").text("密码必须是6-12位");
                    flagPassword = false;
                } else {
                    $("#passwordMsg").text("密码格式正确");
                    flagPassword = true;
                }
            }
            $("#user_password").blur(function () {

                checkPassword();
            });


            function checkConfirmpwd() {
                if ($("user_password").val() == "") {
                $("#confirmpwdMsg").text("密码不能为null")
                flagConfirmpwd = false;
                return;
            }
                var pwd = $("#user_password").val();
                var repwd = $("#confirmpwd").val();

                if (pwd == repwd) {
                    $("#confirmpwdMsg").text("密码验证正确");
                    flagConfirmpwd = true;
                } else {
                    $("#confirmpwdMsg").text("密码验证失败");
                    flagConfirmpwd = false;
                }
            }
            $("#confirmpwd").blur(function () {
                checkConfirmpwd();
            });


            function checkEmail() {
                var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                var email = $("#user_email").val();
                if (reg.test(email)) {
                    $("#emailMsg").text("邮件格式正确");

                } else {
                    $("#emailMsg").text("邮件格式错误");
                    flagEmail = false;
                    return ;
                }
                $.ajax({
                    url: '/usermange/UserInfoServlet',
                    dataType: 'html',
                    type: 'POST',
                    data: {option: "checkEmail", Email: $("#user_email").val(), random: Math.random()},
                    success: function (returnvalue) {

                        if (returnvalue == "true") {

                            $("#emailMsg").text("邮箱可以注册");
                            flagEmail = true;

                        } else if (returnvalue == "false") {

                            $("#emailMsg").text("邮箱不可以注册");
                            flagEmail = false;

                        }
                    }
                });
            }
            $("#user_email").blur(function () {
                checkEmail();
            });


            function checkTele() {
                var reg = /^1[3|4|5|7|8][0-9]{9}$/;
                var tele = $("#user_phone").val();
                if (reg.test(tele)) {

                } else {
                    $("#telephoneMsg").text("手机号码格式错误");
                    flagTelephone = false;
                    return;
                }
                $.ajax({
                    url: '/usermange/UserInfoServlet',
                    dataType: 'html',
                    type: 'POST',
                    data: {option: "checkTele", Tele: $("#user_phone").val(), random: Math.random()},
                    success: function (returnvalue) {

                        if (returnvalue == "true") {

                            $("#telephoneMsg").text("手机可以注册");
                            flagTelephone = true;

                        } else if (returnvalue == "false") {

                            $("#telephoneMsg").text("手机不可以注册");
                            flagTelephone = false;

                        }
                    }
                });

            }

            $("#user_phone").blur(function () {
                checkTele();
            });


            $("#submitButton").click(function () {


                if (flagUsername && flagPassword && flagConfirmpwd && flagEmail && flagTelephone) {
                    document.regForm.submit();
                }
                else {
                    console.log(flagUsername+' flagUsername');
                    console.log(flagPassword+' flagPassword');
                    console.log(flagConfirmpwd+' flagConfirmpwd');
                    console.log(flagEmail+' flagEmail');
                    console.log(flagTelephone+'  flagTelephone');
                }
            });
        });
    </script>
</head>
<body>
//------------------------------- -------------------------------
<div class="container">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8" style="background:#fff;padding:40px 80px;margin:30px;border:7px solid #ccc;">

            <form class="form-horizontal" style="margin-top:5px;" action="/usermange/UserInfoServlet" name="regForm" method="post"
                  enctype="multipart/form-data" onsubmit="return false">
                <input type="hidden" name="option" value="register">
                <!--                用户名-->
                <div class="form-group">
                    <h2 class="form-group">注册</h2>
                    <label for="user_nickname" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="user_nickname" name="user_nickname" placeholder="请输入用户名">
                        <span id="usernameMsg"></span>
                    </div>
                </div>

                <!--                密码-->
                <div class="form-group">
                    <label for="user_password" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="user_password" name="user_password" placeholder="请输入密码">
                        <span id="passwordMsg"></span>
                    </div>
                </div>
                <!--                确认密码-->
                <div class="form-group">
                    <label for="confirmpwd" class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="confirmpwd" name="confirmpwd"
                               placeholder="请输入确认密码">
                        <span id="confirmpwdMsg"></span>
                    </div>
                </div>
<!--                邮箱-->
                <div class="form-group">
                    <label for="user_email" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-6">
                        <input type="email" class="form-control" id="user_email" name="user_email" placeholder="请输入邮箱">
                        <span id="emailMsg"></span>
                    </div>
                </div>

                <div class="form-group opt">
                    <label for="inlineRadio1" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-6">
                        <label class="radio-inline">
                            <input type="radio" name="sex" id="inlineRadio1" value="男" checked="checked">男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" id="inlineRadio2" value="女">女
                        </label>
                    </div>
                </div>
<!--                电话-->
                <div class="form-group">
                    <label for="user_phone" class="col-sm-2 control-label">电话</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="user_phone" name="user_phone" placeholder="请输入电话号码">
                        <span id="telephoneMsg"></span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-2 col-sm-10">
                        <input type="submit" id="submitButton" width="100" value="注册" border="0">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="col-md-2"></div>
</div>
</body>
</html>